<!--  -->
<template>
  <div class="left-box">

    <div class="cell-box" v-for="(item,index) in rollList" :key="item.id" :class="{ 'cell-active': selectIndex == index }" @click="changeIndex(index)">

      <img :src="item.empHeader" class="head-box">
      <div class="cell-right">

        <p class="p1">{{item.empName}}</p>
        <p class="p2">{{item.remark}}</p>
      </div>

    </div>

  </div>
</template>

<script>

import common from "@/common/js/common";
import { empListModel} from "@/api/aiworker.js";
export default {
  data () {
    return {

      rollList: [],
      selectIndex:-1,

    }
  },
  methods: { 

    changeIndex(index){ 
      this.selectIndex = index;
      let obj = {};
      obj.id = this.rollList[index].id;
      obj.empName = this.rollList[index].empName;
      obj.companyName = this.rollList[index].companyName;
      obj.apiToken = this.rollList[index].apiToken;
      obj.empHeader = this.rollList[index].empHeader;
      this.$emit('leftAction',obj )
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {


  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

    let obj = {
        "orgId":  this.$localstore.get("orgId"),
        "isLogin": false,
      "userId": this.$localstore.get("hdUserId"),
        "empIds":[]
    }
      
    empListModel(obj).then((res) => {
      if (res.code == 200) {
        console.log(res);

        this.rollList = res.data;
        if (res.data != null && res.data.length > 0) { 
          this.selectIndex = 0;
          let obj = {};
      obj.id = this.rollList[this.selectIndex].id;
      obj.empName = this.rollList[this.selectIndex].empName;
      obj.companyName = this.rollList[this.selectIndex].companyName;
      obj.apiToken = this.rollList[this.selectIndex].apiToken;
      obj.empHeader = this.rollList[this.selectIndex].empHeader;
          this.$emit('leftAction', obj);
        
        }
      } else {

        if (!common.isStringEmpty(res.message)) {
          this.$message(res.message);
        }

      }
    }).catch((err) => {

      if (!common.isStringEmpty(JSON.stringify(err))) {
        this.$message(JSON.stringify(err.message));
      }
    });

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */

.left-box {
  display: flex;
  flex-direction: column;
}

.cell-box {
  display: flex;
  align-items: center;
box-sizing: border-box;
  
  width: 240px;
  height: 74px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;

  margin-left: 30px;
  margin-top: 10px;

  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #ffffff;
}
.cell-active{
  border: 1px solid #226CFF;
}

.head-box {
  width: 46px;
  height: 46px;
  border-radius: 23px;

  margin-left: 12px;
}

.cell-right {
  height: 74px;
  margin-left: 8px;
  display: flex;
  flex-direction: column;

  justify-content: center;

}

.p1 {
  font-size: 14px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 14px;
  margin: 0px;
}

.p2 {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.3);
  line-height: 12px;
  margin-top: 8px;
}</style>